﻿<div id="status" ng-show="pageLoading"></div>
<div class="all-elements">
    <div id="sidebar" class="page-sidebar">
        <div class="page-sidebar-scroll">
            <div class="nav-item selected-nav-item" data-ng-repeat="r in roleByGroup">
                <a href="#/{{r.RoleValue}}">
                    <div class="icon-nav {{r.RoleValue}}"></div>
                    {{r.RoleName}}
                </a>
            </div>
            <div class="nav-item">
                <a href="#">
                    <div class="icon-nav icon-share" onclick="logout()"></div>
                    THOÁT
                </a>
                <script>
                    function logout() {
                        localStorage.removeItem("idkey");
                        localStorage.removeItem("authen");
                        localStorage.removeItem("menu");
                        $location.path('/login/');
                    }
                </script>
            </div>
        </div>
    </div>

    <div id="content" class="page-content">

        <div class="page-header">
            <p class="logo">
            </p>

            <a href="#" class="deploy-sidebar"></a>
            <div class="user">
                <span class="name">{{userName}}</span>
                <div class="notifi">
                    <span class="noti-chart" ng-show="countNewMessage>0"><a href="#/newMessage">{{countNewMessage}}</a></span>
                    <span class="noti-friend" ng-show="countAddFriend>0"><a href="#/newFriend">{{countAddFriend}}</a></span>
                    <span class="noti-fromroom" ng-show="countFromRoom>0"><a href="#/newFromRoom">{{countFromRoom}}</a></span>
                </div>
            </div>
        </div>
        <form name="myForm">
            <div class="page-content-wrapper">
                <div id="lesson-content">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" ng-model="formData.Email" readonly class="readonly"/>
                    <span ng-show="myForm.email.$error.required && myForm.email.$dirty">Trường bắt buộc</span>
                    <span ng-show="!myForm.email.$error.required && myForm.email.$error.email && myForm.email.$dirty">invalid email</span>
                    <br />
                    <label for="email">Tên đầy đủ</label>
                    <input type="text" id="name" name="name" ng-model="formData.FullName" required />
                    <span ng-show="myForm.name.$error.required && myForm.name.$dirty">Trường bắt buộc</span>
                    <br />
                    <label for="username">Tài khoản</label>
                    <input type="text" id="username" name="username" ng-model="formData.UserName" ng-minlength="5" ng-maxlength="20" ng-pattern="/^[A-z][A-z0-9]*$/" required readonly="true" class="readonly" />
                    <span ng-show="myForm.username.$error.required && myForm.username.$dirty">Trường bắt buộc</span>
                    <span ng-show="!myForm.username.$error.minLength && !myForm.username.$error.maxLength && myForm.username.$error.pattern && myForm.username.$dirty">Must start with a letter, and contain letters &amp; numbers only.</span>
                    <span ng-show="!myForm.username.$error.required && (myForm.username.$error.minlength || myForm.username.$error.maxlength) && myForm.username.$dirty">Username ust be between 5 and 20 characters.</span>
                    <br />
                    <label for="username">Số điện thoại</label>
                    <input type="text" id="phonenumber" name="phonenumber" ng-model="formData.PhoneNumber" ng-minlength="9" ng-maxlength="15" ng-pattern="/^[0-9]*$/" />
                    <div>
                        <div ng-click="changePass()">» Đổi mật khẩu</div>
                        <div ng-show="changePassShow">
                            <label for="password">Mật khẩu cũ (*)</label>
                            <input type="password" id="passwordold" name="passwordold" ng-model="passwordData.PasswordOld" ng-minlength="8" ng-maxlength="20" />
                            <span ng-show="password.$error.required && password.$dirty">Vui lòng nhập trường này!</span>
                            <span ng-show="!passwordold.$error.required && (passwordold.$error.minlength || passwordold.$error.maxlength) && passwordold.$dirty">Password phải từ 8 đến 20 ký tự</span>
                            <br />

                            <label for="password">Mật khẩu mới (*)</label>
                            <input type="password" id="password" name="password" ng-model="passwordData.Password" ng-minlength="8" ng-maxlength="20"  />
                            <span ng-show="myForm.password.$error.required && myForm.password.$dirty">Trường bắt buộc</span>
                            <span ng-show="!myForm.password.$error.required && (myForm.password.$error.minlength || myForm.password.$error.maxlength) && myForm.password.$dirty">Password phải từ 8 đến 20 ký tự</span>
                            <br />


                            <label for="password_c">Nhập lại mật khẩu mới (*)</label>
                            <input type="password" id="password_c" name="password_c" ng-model="passwordData.PasswordC" valid-password-c />
                            <span ng-show="myForm.password_c.$error.required && myForm.password_c.$dirty">Trường bắt buộc</span>
                            <span ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && myForm.password.$dirty">Mật khẩu không trùng khớp.</span>
                            <br />
                        </div>
                    </div>
                    <div>
                        <div ng-click="changeAvatar()">» Đổi ảnh đại diện</div>
                        <div ng-show="changeAvatarShow">
                            <button type="submit"  ng-click="takePicture()">chụp ảnh</button><button type="submit"  ng-click="selectPicture()">chọn ảnh</button>
                            <div><img id="newimg" style="display:none;" width="50" height="50"/></div>
                        </div>
                    </div>
                    <div ng-show="errorStatus" class="error">Lỗi quá trình cập nhật</div>
                    <div ng-show="successStatus" class="success">Cập nhật thành công</div>

                </div>

            </div>
            <div class="footer">
                <div class="footer-shortcuts">
                    <div>
                        <a href="#/{{routeId}}">
                            <span class="button-bottom icon-back-room"></span><span class="button-text">Quay về</span>
                        </a>
                    </div>

                    <div>
                        <a>
                            <span class="button-bottom icon-next-lesson"></span><button type="submit" class="button-text" ng-disabled="!myForm.$valid" ng-click="updateUser()">Cập nhật</button>
                        </a>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>
